import { ref } from 'vue';
import { TooltipState } from '../types';
export function useTooltip() {
  const tooltip = ref<TooltipState>({
    visible: false,
    content: '',
    x: 0,
    y: 0
  });

  const showTooltip = (event: MouseEvent, content: string) => {
    const target = event.target as HTMLElement;
    if (target && target.scrollWidth > target.clientWidth) {
      const rect = target.getBoundingClientRect();
      tooltip.value = {
        visible: true,
        content: content,
        x: rect.left,
        y: rect.top - 30
      };
    }
  };

  const hideTooltip = () => {
    tooltip.value.visible = false;
    tooltip.value.content = '';
  };

  return {
    tooltip,
    showTooltip,
    hideTooltip
  };
}
